<template>
  <div class="left">
      <div v-for="(item,index) in lists" :key="index" :class="indexs == index?'liang':''" @click="gaoliang(index)">{{item.tabname}}</div>
    </div>
</template>

<script>
export default {
    data(){
    return {
      lists:[
    {tabname:"热销",
    list:[
      {pic:"",name:"热销商品1",yuxiao:456,haoping:444},
      {pic:"",name:"热销商品2",yuxiao:456,haoping:444},
      {pic:"",name:"热销商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"优惠",
    list:[
      {pic:"",name:"优惠商品1",yuxiao:456,haoping:444},
      {pic:"",name:"优惠商品2",yuxiao:456,haoping:444},
      {pic:"",name:"优惠商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"三文鱼",
    list:[
      {pic:"",name:"三文鱼商品1",yuxiao:456,haoping:444},
      {pic:"",name:"三文鱼商品2",yuxiao:456,haoping:444},
      {pic:"",name:"三文鱼商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"刺身",
    list:[
      {pic:"",name:"刺身商品1",yuxiao:456,haoping:444},
      {pic:"",name:"刺身商品2",yuxiao:456,haoping:444},
      {pic:"",name:"刺身商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"礼品专区",
    list:[
      {pic:"",name:"礼品专区商品1",yuxiao:456,haoping:444},
      {pic:"",name:"礼品专区商品2",yuxiao:456,haoping:444},
      {pic:"",name:"礼品专区商品3",yuxiao:456,haoping:444},
    ]},
    {tabname:"大虾",
    list:[
      {pic:"",name:"大虾专区商品1",yuxiao:456,haoping:444},
      {pic:"",name:"大虾专区商品2",yuxiao:456,haoping:444},
      {pic:"",name:"大虾专区商品3",yuxiao:456,haoping:444},
    ]},
      ],
      indexs:0,
    }
  },
  methods:{
    gaoliang(index){
      this.indexs = index;
    }
  },
}
</script>

<style>
.left{
    margin-right:10px ;
    width: 80px;
  }
  .left>div{
    width: 60px;
    margin-bottom:20px ;
    padding-left: 5px;
  }
  .left>div:nth-child(1){
    font-weight:bold ;
    margin-top: 5px;
  }
</style>